
<include file="./Tpl/default/Index/header.html"/>

<css file="__PUBLIC__/index/css/index.css"/>
<css file="__PUBLIC__/index/css/complete.css"/>
<script>
    $(function(){
        var imgurl = "{$img.adres}";
        var id = "{$Think.get.id}";
        var url = "__URL__";
        var temp_h1 = document.body.clientHeight;
        var temp_h2 = document.documentElement.clientHeight;
        var isXhtml = (temp_h2<=temp_h1&&temp_h2!=0)?true:false; 
        var temp_h =  document.body.clientHeight || document.documentElement.clientHeight
        var htmlbodyh = isXhtml?document.documentElement.clientHeight:document.body.clientHeight;
        $(window).keydown(function(ev){
            if(ev.keyCode==39){
                $.get(url+'/keydown/main/right/id/'+id,function(data){
                    if(data.num==1){
                        return false;
                    }
                    location.href=url+'/showimg/id/'+data.id;
                },'json')
            }else if(ev.keyCode==37){
                $.get(url+'/keydown/main/left/id/'+id,function(data){
                    if(data.num==1){
                        return false;
                    }
                    location.href=url+'/showimg/id/'+data.id;
                },'json')
            }
        })
        $('.this_img').hover(function(){
            $('.lookbig').animate({top:0,right:0},200)
        },function(){
            $('.lookbig').animate({top:-32,right:-32},200)
        })
        $('.lookbig').hover(function(){
            $(this).addClass('hover')
        },function(){
            $(this).removeClass('hover')
        })
        resize()
        $(window).resize(function(){
            resize()
        })
        
        // $('.bigimg').css(height:$(window).height(),left:$(window).width(),'minHeight':htmlbodyh})
        $('.lookbig').click(function(){
            $('body').css('overflowX','hidden');
            
            //$('.message_img').css({height:$(window).height()})
            $('.header .top').css('position','relative')
            $('.new_link').css('top',0)
            $('.message_img').animate({left:-$(window).width()},1000,function(){
                $('.message_img').hide()
            })
            $.post(url+'/bigimg/id/',{'id':id},function(data){
                if(data){
                    var img = $('<img/>');
                    img.attr('class','showbigimg');
                    img.attr('src',data.adres);
                    img.css('margin',20);
                    $('.bigright').append(img)
                    $('.bigright').css('minWidth',img.outerWidth(true))
                }
            },'json')
            document.documentElement.scrollTop=0 ;
            document.body.scrollTop =0;
            $('.bigimg').show().animate({left:0},1000,function(){
                $('.bigimg').css({'height':$('.showbigimg').outerHeight(true)})
            })
        })
        
        $('.gohostory').click(function(){
            $('.bigimg').animate({left:$(window).width()},1000,function(){
                $('.bigimg').css('height',$(window).height()).hide();
                $('.bigright .showbigimg').remove();
            }) 
            $('.message_img').show().animate({left:0},1000,function(){
                $('body').css('overflowX','auto');
                $('.header .top').css('position','fixed')
                $('.new_link').css('top',38)
            })

        })
        $('.bigimg').css({left:$(window).width()})
        function resize(){
            var w = $(window).width()
            $('.bigimg').css({width:$(window).width(),'minHeight':temp_h})
            $('.bigright').css({width:$(window).width()-$('.bigleft').outerWidth()});
        }
    })
</script>
<div class="all">
    <div class="left">
        <div class="huabname">
            <div class="huatop">
                <span class="kname">{$img.name}</span>
                <span class="knum" style="font-size:16px">{$index}/{$img.knum}</span>
            </div>
            <a href="{:U('Complete/showhuab/kid/'.$img['kid'])}" class="smallimg">

                <volist name="kimg" id="n">
                    <img src="{$n.adres}" width="60" height="60">
                </volist>
            </a>
            <div class="atten">
                <if condition="$img.uid eq $_SESSION['uid']">
                    <a href="{:U('Complete/geit/kid/'.$img['kid'])}">编辑</a> 
                    <elseif condition="$img.atten eq 0"/>
                    <a href="javascript:;" class="attention" name="{$img.kid}">关注</a>
                    <else/>
                    <a href="javascript:;" class="relatten"  name="{$img.kid}">已关注</a>
                </if>
            </div>
        </div>
        <div class="key">
            <div class="huatop">
                <span class="kname">使用键盘查看采集 </span>
            </div>
            <div class="keydown">
                <div class="pre">
                    <img src="__PUBLIC__/index/images/hotkey_left_arrow.png"/>
                    <p>上一页</p>
                </div>
                <div class="next">
                    <img src="__PUBLIC__/index/images/hotkey_right_arrow.png"/>
                    <p>下一页</p>
                </div>
                <div class="help">
                    <img src="__PUBLIC__/index/images/hotkey_help.png"/>
                    <p>获取更多帮助</p>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="top">
            <a href="{:U('Complete/showuser/uid/'.$img['uid'])}" class="user_a"><img src="{$img.thump}" width="50" height="50"></a>
            <div class="coll">
                <p class="uname"> 
                    <a href="{:U('Complete/showuser/uid/'.$img['uid'])}">{$img.uname}</a>
                </p>
                <p class="time">
                    采集于 {$img.addtime|tim}
                </p>
            </div>
        </div>
        <div class="operating top">
            <ul class="hua_oper">
                <li class="turn" name="1"><span class="img"></span>转采</li>
                <if condition="$img.uid eq $_SESSION['uid']">
                    <li>
                        编辑
                    </li>
                    <li class="del_img" name="{$img.id}">
                        删除
                    </li>
                    <else/>    
                    <li class="fenxiang good" name="{$img.id}">
                        <span class="img"></span><span class="good_num">{$img.num}</span>赞
                    </li>
                </if>
            </ul>
        </div>
        <div class="this_img">
            <span class="lookbig">
            </span>
            <img src="{$img.adres}" class="timg"/>
        </div>
        <taglib name="blog"/>
        <blog:com mid="$img['id']">
            <div class="coent">
                <if condition="$field.uid eq $_SESSION['uid']">
                    <a href="javascript:;" class="delcom" name="{$field.id}"></a>
                </if>
                <a href="javascript:;" class="huifu"></a>
                <div class="img">
                    <img src="{$field.thump}" width="50" height="50"/>
                </div>
                <div class="cont">
                    <p class="top"><a href="">{$field.uname}</a>&nbsp <span style="font-size:12px;color:#ccc">{$field.time|tim}</span></p>
                    <p class="con">{$field.content}</p>
                </div>
            </div>
        </blog:com>
        <div class="coent">
            <div class="img">
                <if  condition="!empty($_SESSION['thump'])">
                    <img src="{$Think.session.thump}" width="50" height="50"/>
                    <else/>
                    <img src="__PUBLIC__/index/images/default_buddy_icon.jpg"  width="50" height="50"/>
                </if>
            </div>
            <div class="cont">
                <textarea class="cont_mesa" placeholder='添加评论或把采集@给好友' autocomplete='off'></textarea>
            </div>
            <div class="the_btn">
                <p class="com_btn" name="{$img.id}">添加评论</p>
            </div>
        </div>
        <if condition="!empty($img['num'])">
            <div class="coent">
                <p class="whogood">被这些人称赞过</p>
                <volist name="goodData" id="n">
                    <a href="{:U('Complete/showuser/uid/'.$n['uid'])}"><img src="{$n.thump}" class="headerimg"/></a>
                </volist>
            </div>
        </if>
    </div>
</div>
</div>
<div class="bigimg">
    <div class="bigleft">
        <img src="__PUBLIC__/index/images/logo_grey.png" class="logo_grey"/>
        <span class="gohostory">返回</span>
    </div>
    <div class="bigright"></div>
</div>
</body>

<html>